<template>
  <div class='container'>
    <el-card>
      <!-- 顶部form表单 -->
      <el-form :inline="true">
        <el-form-item label="标签名称" >
        <el-input v-model="search.tags" placeholder="请输入标签名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="search.state" clearable placeholder="请选择">
    <el-option label="启用" value=1></el-option>
    <el-option label="禁用" value=0></el-option>
  </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="Clear">清除</el-button>
        </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
        </el-form-item >
          <el-form-item style="float: right;" >
          <el-button  icon="el-icon-edit" type="success" @click="doAdd">新增标签</el-button>
        </el-form-item>
      </el-form>
       <!-- 数据记录 -->
        <el-alert

          type="info"
          class="alert"

          show-icon
        >共 {{total}}条记录</el-alert>
        <!-- end -->
      <!-- 标签列表结构 -->

      <el-table :data="tagsList">
        <el-table-column width="130" label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName" width="270"></el-table-column>
        <el-table-column label="标签名称" prop="tagName" width="270"></el-table-column>
        <el-table-column label="创建者" prop="username" width="270"></el-table-column>
        <el-table-column label="创建日期" prop="addDate" width="340"></el-table-column>
        <el-table-column label="状态" prop="state" width="220"></el-table-column>
        <el-table-column label="操作">
 <template slot-scope="{row}">
       <el-button type="text" @click="handleStatus(row)">
        <span v-if="row.state==='已禁用'">启用</span>
        <span v-else>禁用</span>
       </el-button>
          <el-button type="text" @click="doUpdate(row)" :disabled='row.disabled'>修改</el-button>
          <el-button type="text" @click="doDelete(row)" :disabled='row.disabled'>删除</el-button>
      </template>

        </el-table-column>
      </el-table>
      <!-- 底部分页器 -->
  <el-pagination style="float: right;padding: 20px 0;"
  background=""
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParams.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageParams.pagesize"
      layout=" prev, pager, next, sizes,jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <!-- 新增标签弹层 -->
    <el-dialog :title="cTitle" :visible.sync="dialogVisible"
     :close-on-click-modal="false"
   :close-on-press-escape="false"
   @close="dialogClose">
<el-form ref="form" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="所属学科" prop="subjectID">
    <el-select v-model="formData.subjectID" placeholder="请选择">
      <el-option v-for="item in simpleList" :key = item.value :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="标签名称" prop="tagName" >
    <el-input v-model="formData.tagName" placeholder="请输入标签名称"></el-input>
  </el-form-item>
 <el-form-item style="float: right;">
    <el-button @click="doCancel">取消</el-button>
    <el-button type="primary" @click="hSubmit">确认</el-button>
  </el-form-item>
</el-form>
    </el-dialog>

  </div>

</template>

<script>
import { list, add, update, remove, changeState } from '@/api/hmmm/tags'
import { simple as subjectSimple } from '@/api/hmmm/subjects'

export default {
  data () {
    return {
      // 学科传递过来的学科ID
      subjectID: '',
      tagsList: [], // 标签详细列表
      simpleList: [], // 标签简单列表
      dialogVisible: false, // 是否显示弹层
      isEdit: false, // 是否是编辑
      id: '', // 保存id
      total: 0,
      pageParams: {
        page: 1,
        pagesize: 10
      },
      search: {
        tags: '',
        state: ''
      },
      formData: {
        subjectID: '',
        subjectName: '',
        tagName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      }
    }
  },
  // 监听器
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
        // console.log(val, oldVal)
        if (val.name === 'subjects-tags') {
          // 获取标签列表
          this.loadtagsList()
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    Clear () {
      // 重置搜索框数据
      this.search = {}
    },
    async getSubjectTags (subjectID) {
      const { data } = await list({ ...this.pageParams, subjectID: subjectID, tagName: this.search.tags })
      this.tagsList = data.items
      // 获取数据条数
      this.total = data.counts
      this.tagsList.forEach(item => {
        if (item.state === 1) {
          item.state = '已启用'
          item.disabled = true
          item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
        } else {
          item.state = '已禁用'
          item.disabled = false
          item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
        }
      })
    },
    // 加载标签列表
    async loadtagsList () {
      const { data } = await list(this.pageParams)
      this.tagsList = data.items
      // 获取数据条数
      this.total = data.counts
      this.tagsList.forEach(item => {
        if (item.state === 1) {
          item.state = '已启用'
          item.disabled = true
          item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
        } else {
          item.state = '已禁用'
          item.disabled = false
          item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
        }
      })

      console.log(data, 'loadtagsList')
    },
    // 获取简单标签列表
    async loadsimpleList () {
      const { data } = await subjectSimple()
      this.simpleList = data
      console.log(data, 'simple')
    },
    // 点击新增目录
    doAdd () {
      // 弹框显示
      this.dialogVisible = true
      this.isEdit = false
    },
    // 封装新增目录的方法
    async  hAdd () {
      const subjectID = this.formData.subjectID
      const tagName = this.formData.tagName
      await add({ subjectID, tagName })
      // 刷新标签列表
      this.loadtagsList()
      // 关闭弹层
      this.dialogVisible = false
      // 清空表单的信息
      this.dialogClose()
      // console.log(data, '新增目录成功')
    },
    // 点击确认按钮新增标签
    hSubmit () {
      this.isEdit ? this.hUpdate() : this.hAdd()
    },
    // 弹层关闭触发的方法
    dialogClose () {
      this.formData.subjectID = ''
      this.formData.tagName = ''
      this.$refs.form.resetFields()
    },
    // 点击弹层的取消按钮
    doCancel () {
      this.dialogClose()
      this.dialogVisible = false
    },
    // 点击修改
    async doUpdate (row) {
      this.dialogVisible = true
      this.isEdit = true
      // 保存id
      this.id = row.id
      // 数据回显
      this.formData.subjectID = row.subjectID
      this.formData.tagName = row.tagName
      console.log(row, 'row')
    },
    // 封装修改的请求方法
    async hUpdate () {
      // console.log(this.id, 'id')
      // console.log(this.formData.subjectID, 'subjectID')
      // console.log(this.formData.tagName, 'tagName')
      const data = await update({ id: this.id, subjectID: this.formData.subjectID, tagName: this.formData.tagName })
      if (this.subjectID) {
        this.getSubjectTags(this.subjectID)
      } else { this.loadtagsList() }
      this.dialogVisible = false
      this.dialogClose()
      console.log(data, 'hUpdate')
    },
    // 标签删除
    doDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.hDelete(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async hDelete (row) {
      // console.log(row, 'row')
      await remove(row)
      if (this.tagsList.length === 1) {
        this.pageParams.page--
        if (this.pageParams.page <= 0) {
          this.pageParams.page = 1
        }
      }
      // 重新渲染标签列表
      this.loadtagsList()
    },
    doClean () {
      this.search = {}
    },
    // 搜索信息
    async handleFilter () {
      this.pageParams.tagName = this.search.tags
      if (this.pageParams.page !== 1) {
        this.pageParams.page = 1
      }
      if (this.search.state !== '0' && this.search.state !== '1') {
        this.loadtagsList()
      } else {
        // 如果有学科ID
        if (this.subjectID) {
          const { data } = await list({ subjectID: this.subjectID, tagName: this.search.tags, state: this.search.state, page: this.pageParams.page, pagesize: this.pageParams.pagesize })
          // 请求的数据存储到tagsList里
          this.tagsList = data.items
          // 重新把total计数
          this.total = data.counts
          // 遍历tagsList数组,给相应的修改删除按钮添加上disabled属性
          this.tagsList.forEach(item => {
            if (item.state === 1) {
              item.state = '已启用'
              item.disabled = true
              item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
            } else {
              item.state = '已禁用'
              item.disabled = false
              item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
            }
          })
        } else {
          const { data } = await list({ tagName: this.search.tags, state: this.search.state, page: this.pageParams.page, pagesize: this.pageParams.pagesize })
          // 请求的数据存储到tagsList里
          this.tagsList = data.items
          // 重新把total计数
          this.total = data.counts
          // 遍历tagsList数组,给相应的修改删除按钮添加上disabled属性
          this.tagsList.forEach(item => {
            if (item.state === 1) {
              item.state = '已启用'
              item.disabled = true
              item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
            } else {
              item.state = '已禁用'
              item.disabled = false
              item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
            }
          })
        }
      }
    },
    // 启用、禁用
    async handleStatus (row) {
      // const id = row.id
      // const state = row.state
      row.state === '已启用' ? row.state = 0 : row.state = 1
      await changeState(row)
      row.state ? row.state = '已启用' : row.state = '已禁用'
      this.$message.success(`${row.state}`)
      // if (this.subjectID) {
      //   // 点击之后将disabled取反
      //   row.disabled = !row.disabled
      // } else {
      // 刷新列表
      if (this.subjectID) {
        this.getSubjectTags(this.subjectID)
      } else {
        this.loadtagsList()
      }

      // console.log(data, '启用禁用')
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageParams.page = 1
      this.pageParams.pagesize = val
      this.loadtagsList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageParams.page = val
      console.log(this.pageParams.page, '第几页')
      this.loadtagsList()
    }
  },
  computed: {
    cTitle () {
      return this.isEdit ? '编辑标签' : '新增标签'
    }
  },
  created () {
    // 接收学科跳转传过来的值，如果有值，就调用接口发送请求的时候将值传进去
    if (this.$route.query.subjectInfo) {
      // console.log(this.$route.query.subjectInfo)
      this.getSubjectTags(this.$route.query.subjectInfo.id)
      // 存储传递过来的ID
      this.subjectID = this.$route.query.subjectInfo.id
      // 调用标签简单列表方法
      this.loadsimpleList()
    } else {
      // 调用标签列表方法
      this.loadtagsList()
      // 调用标签简单列表方法
      this.loadsimpleList()
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep.el-dialog__wrapper .el-dialog{
  width: 400px;
  height: 280px;
  .el-input__inner{
    width: 280px;
  }
}
</style>
